import React, { PureComponent } from 'react'
import { Routes, Route, BrowserRouter, NavLink  } from 'react-router-dom'
import Home from './home'
import About from './about'
import Profile from './profile'



class WrapRoutr extends PureComponent {
  render() {
    return (
      <div>
        <BrowserRouter>
          <NavLink to="/" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>首页</NavLink>
          <NavLink to="/about" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>关于</NavLink>
          <NavLink to="/user/abc" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>abc</NavLink>
          <NavLink to="/user/123" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>123</NavLink>
          
          <Routes>
            <Route path='/' element={<Home />}></Route>
            <Route path='/*' element={<About />}></Route>
            <Route path='/user/:id' element={<Profile />}></Route>
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}
export default WrapRoutr
